<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <el-alert title="注册" center=true type="warning" :closable="false" />
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="form"
        status-icon
        :rules="rules"
        size="large"
        >

        <el-form-item label="账号" prop="username">
                    <el-input
                        v-model="form.username"
                        :placeholder="账号首字母英文"
                        prefix-icon="user"
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="form.password"
                        type="password"
                        :placeholder="密码"
                        prefix-icon="lock"
                    ></el-input>
                </el-form-item>
        </el-form>

        <el-row  justify="end">
            <p>
              <el-button
                    type="primary"
                    :loading="loading"
                    @click="doRegistry"
                    :icon="Edit"
                    auto-insert-space=true
                    size="large"
                >注册</el-button>

                <el-button
                    :loading="loading"
                    @click="$router.push('/login')"
                    :icon="Key"
                    auto-insert-space=true
                    size="large"
                >前往登录</el-button>
            </p>
        </el-row>
    </el-card>
  </template>

<script setup>
    import {ref, reactive, computed} from 'vue'
    import { registry } from '../apis/login'
    import { useRouter } from 'vue-router';
    import { Edit, Key } from '@element-plus/icons-vue'

    const formRef = ref();
    const form = reactive({
        username: "",
        password: "",
    });
    const rules = computed(() => {
        return {
          username: [
                {
                    required: true,
                    message: '账号不能为空',
                    trigger: ["change", "blur"],
                },
                {
                    pattern: /^[a-zA-Z][a-zA-Z0-9]{3,31}$/,
                    message: '以字母开头的不少于四位数的英文与数字组合',
                    trigger: ["change", "blur"],
                },
            ],
            password: {
                    required: true,
                    min: 6,
                    message: '密码不能少于6位',
                    trigger: ["change", "blur"],
            },
        }
    });

    const loading = ref(false);
    const router = useRouter();
    function doRegistry() {
        formRef.value.validate((valid) => {
            if(!valid) return;
            loading.value = true;
            registry(form).then((res) => {
                console.log(res);

                ElMessage({
                  message: '注册成功，即将跳转登陆页面...',
                  type: 'success',
                })
                setTimeout(() => {
                  router.push("/login");
                }, 3000);

            }).finally(() => {
                loading.value = false;
            });
        });
    }
</script>
  
  <style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .text {
    font-size: 14px;
  }
  
  .item {
    margin-bottom: 18px;
  }
  </style>
  